<template>
<div>
  <!------------------------面包屑--------------------------->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
    <el-breadcrumb-item :to="{path:'/blank'}"><i class="el-icon-reading"></i>考试管理</el-breadcrumb-item>
    <el-breadcrumb-item>阅卷管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  <el-row style="float: left;margin-bottom: 10px">
    <el-input class="find-input" placeholder="输入考试名称" v-model="examName" clearable @keydown.native.enter="find"></el-input>
    <el-input v-show="localUser.roleId!=3" class="find-input" placeholder="输入专业名称" v-model="majorName"  clearable style="margin: 0 5px" @keydown.native.enter="find"></el-input>
    <!--班级搜索栏-->
    <el-input  class="find-input" placeholder="输入班级名称" v-model="className" clearable @keydown.native.enter="find"></el-input>
    <!--  搜索按钮  -->
    <el-button type="success" size="medium" icon="el-icon-search" style="margin-left: 10px" @click="find()">搜索</el-button>
    <el-button v-show="!disSelect" type="danger" size="medium" icon="el-icon-refresh" @click="lockSelect">锁定</el-button>
    <el-button v-show="disSelect" type="success" size="medium" icon="el-icon-refresh" @click="lockSelect">取消锁定</el-button>
  </el-row>


  <!--考试列表-->
    <el-table :data="TableData" stripe border>
      <el-table-column  align="center" prop="id" label="试卷id" width="80">
      </el-table-column>
      <el-table-column  header-align="center"  prop="examName" label="考试名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center"  prop="examTime" label="考试花费时间(分钟)" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center"  prop="trueName" label="学生" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="majorName" label="专业" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center"  prop="className" label="班级" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center"  prop="logicScore" label="逻辑题得分" width="100">
      </el-table-column>
      <el-table-column
          prop="totalScore"
          label="总得分"
          width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.totalScore==null">待批阅</p>
          <p style="color: #409EFF" v-else-if="scope.row.totalScore >= scope.row.passScore">{{scope.row.totalScore}}</p>
          <p v-else style="color: red">{{scope.row.totalScore}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="操作" width="120">
        <template slot-scope="scope">
          <div>
            <el-button icon="el-icon-document" v-if="scope.row.totalScore==null" type="primary" @click="goToExamRecord(scope.row.id)">批阅</el-button>
            <el-button icon="el-icon-document-checked" v-else type="danger" @click="goToExamRecord(scope.row.id)">已批</el-button>
          </div>
        </template>
      </el-table-column>
  </el-table>

  <!--  ------------------------分页器------------------------  -->
  <div style="text-align: right;margin-top: 10px">
    <el-pagination
        @current-change="changePage"
        layout="total, prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize">
    </el-pagination>
  </div>
<!--  分页器结束  -->
</div>
</template>

<script>
let localJwt = localStorage.getItem('localJwt');
export default {
  data(){
    return{
      TableData: [],
      total: 0,
      pageSize: 0,
      currentPage: 1,
      examName:"",
      majorName:"",
      className:"",
      disSelect:false,
      localUser:{},
    }
  },
  methods:{
    lockSelect(){
      if(!this.disSelect){
        let selectExam = {
          examName:this.examName,
          majorName:this.majorName,
          className:this.className
        }
        localStorage.setItem("selectExam",JSON.stringify(selectExam));
        this.disSelect = true;
      }else {
        localStorage.removeItem("selectExam");
        this.disSelect = false;
      }
    },
    /*跳转对应阅卷界面*/
    goToExamRecord(id){
      console.log("id = " + id);
      let path = '/exam-marking?id=' + id;
      //window.open(path);//此方法会打开一个新的窗口
      this.$router.push(path);
    },
    //分页器相关
    changePage(value){
      this.$router.replace('?page=' + value);
      this.loadList();
    },
    //加载考试列表
    loadList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page = 1;
      }
      console.log('localJwt =' + localJwt);
      let url = 'http://localhost:9283/examRecord/list-content/?page='+ page+
          "&examName="+this.examName+"&majorName="+this.majorName+"&className="+this.className;
      console.log('url =' + url);
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .get(url).then((response) =>{
        let jsonResult = response.data;
        console.log(jsonResult.state);
        console.log(jsonResult.data.list);
        if (jsonResult.state == 20000){
          this.TableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        } else {
          this.$alert(jsonResult.message,'错误',{
            confirmButtonText:'确认',
            callback: action => {// eslint-disable-line no-unused-vars
            }
          })
        }
      });
    },
  find(){
    let page = this.$router.currentRoute.query.page;
    if (!page){
      page = 1;
    }

    console.log('localJwt =' + localJwt);
    let url = 'http://localhost:9283/examRecord/list-content/?page='+ page+
        "&examName="+this.examName+"&majorName="+this.majorName+"&className="+this.className;
    console.log('url =' + url);

    this.axios
        .create({
          'headers': {
            'Authorization': localJwt
          }
        })
        .get(url).then((response) =>{
      let jsonResult = response.data;
      console.log(jsonResult.state);
      console.log(jsonResult.data.list);
      if (jsonResult.state == 20000){
        this.TableData = jsonResult.data.list;
        this.total = jsonResult.data.total;
        this.pageSize = jsonResult.data.pageSize;
        this.currentPage = jsonResult.data.currentPage;
        if (jsonResult.jwt!=null){
          localStorage.setItem("localJwt",jsonResult.jwt);
        }
      }else if(jsonResult.state==70100){
        this.$alert(jsonResult.message, '错误', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        this.$router.push('/')
      } else {
        this.$alert(jsonResult.message,'错误',{
          confirmButtonText:'确认',
          callback: action => {// eslint-disable-line no-unused-vars
          }
        })
      }
    });
  },
  //
  localSelectExam(){
    let selectExam = JSON.parse(localStorage.getItem("selectExam"));
    if(selectExam==null){
      return;
    }
    console.log(selectExam);
    this.examName = selectExam.examName;
    this.majorName = selectExam.majorName;
    this.className = selectExam.className;
    this.disSelect = true;
  },
    //加载当前登录对象
    loadUser(){

      this.localUser = JSON.parse(localStorage.getItem("localUser"));
      if(this.localUser.roleId==3){
        this.majorName = this.localUser.majorName;
        //this.className = this.localUser.className;
      }
      console.log(this.majorName+"--------"+this.className)
    }
  },
  mounted() {
    this.localSelectExam();
    this.loadUser();
    this.loadList();
  }
}
</script>

<style scoped>
.em-select{
  text-align: left !important;float: left;
}
.find-input{
  display: inline-block;width: 150px;float: left;
}
</style>
